<div dDropDown appendToBody [appendToBodyDirections]="['leftDown', 'leftUp', 'rightDown', 'rightUp']" [closeScope]="'blank'">
  <div dDropDownToggle class="theme-toggle">
    {{ 'themePicker.theme' | translate }}
    <div class="theme-block">
      <span class="brand-color"></span>
      <span class="background-color"></span>
    </div>
  </div>
  <div dDropDownMenu class="theme-menu">
    <d-tabs [type]="'tabs'" [(activeTab)]="activeThemeType" (activeTabChange)="activeTabChange($event)">
      <d-tab id="devuiTheme" title="{{ 'themePicker.default' | translate }}" tabId="devuiTheme">
        <ng-template dTabContent>
          <section>
            <div class="title">{{ 'themePicker.color' | translate }}</div>
            <div class="content theme-color">
              <div
                class="theme-brand"
                [ngStyle]="{
                  backgroundColor: (themes[themePref + '-light-theme']?.data)['devui-brand']
                }"
                *ngFor="let themePref of ['devui', 'green']"
                (click)="themePrefixChange(themePref)"
              >
                <ng-container *ngIf="themePref === themePrefix">
                  <svg
                    viewBox="0 0 16 16"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    class="devui-checkbox-tick"
                  >
                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                      <polygon
                        fill-rule="nonzero"
                        points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043"
                        class="devui-tick"
                      ></polygon>
                    </g>
                  </svg>
                </ng-container>
              </div>
            </div>
          </section>
          <section>
            <div class="title">{{ 'themePicker.mode' | translate }}</div>
            <div class="content">
              <d-radio-group
                class="theme-select-radio"
                [(ngModel)]="themeMode"
                (change)="themesChange()"
                [ngModelOptions]="{ standalone: true }"
              >
                <d-radio [value]="'light'" [disabled]="themePrefersColorScheme">{{ 'themePicker.light' | translate }}</d-radio>
                <d-radio [value]="'dark'" [disabled]="themePrefersColorScheme">{{ 'themePicker.dark' | translate }}</d-radio>
              </d-radio-group>
              <div class="prefers-color-scheme">
                <d-toggle
                  class="theme-follow-toggle"
                  [(ngModel)]="themePrefersColorScheme"
                  (ngModelChange)="themePrefersColorSchemeChange($event)"
                ></d-toggle>
                <span>{{ 'themePicker.follow' | translate }}</span>
              </div>
              <div>
                <d-toggle class="theme-follow-toggle" [(ngModel)]="largeFontSizeMode" (ngModelChange)="themeFontSizeChange()"></d-toggle>
                <span>{{ 'themePicker.largeSize' | translate }}</span>
              </div>
            </div>
          </section>
        </ng-template>
      </d-tab>
      <d-tab id="advancedTheme" title="{{ 'themePicker.extend' | translate }}" tabId="advancedTheme">
        <ng-template dTabContent>
          <div style="width: 180px; margin: 0 auto">
            <div
              *ngFor="let item of advancedThemeList"
              class="extend-theme-image"
              [style.background-image]="'url(' + assetsPrefix + item.url + ')'"
              (click)="advancedThemeChange(item.value)"
            >
              <span class="extend-theme-title" [style.color]="item.value === 'infinity' ? '#252b3a' : null">{{
                'themePicker.' + item.value | translate
              }}</span>
              <i *ngIf="currentAdvancedTheme === item.value" class="icon-right active-theme"></i>
            </div>
          </div>
        </ng-template>
      </d-tab>
      <!-- <d-tab id="customizeTheme" title="{{ 'themePicker.customize' | translate }}" tabId="customizeTheme">
        <ng-template dTabContent>
          <app-theme-picker-customize></app-theme-picker-customize>
        </ng-template>
      </d-tab> -->
    </d-tabs>
  </div>
</div>
